<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>黑客帝国文字瀑布</title>

    <style type="text/css">
        * {margin: 0; padding: 0;}
        body {background: black;}
        canvas {display: block;}
    </style>

</head>
<body>

<canvas id="c"></canvas>

<script type="text/javascript">
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");

    c.height = window.innerHeight;
    c.width = window.innerWidth;

    var chinese = "I Love you";
    chinese = chinese.split("");

    var font_size = 10;
    var columns = c.width / font_size;
    var drops = [];
    for (var x = 0; x < columns; x++){
        drops[x] = 1;
    }
    function draw() {
        ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
        ctx.fillRect(0, 0, c.width, c.height);

        ctx.fillStyle = "#0F0";
        ctx.font = font_size + "px arial";
        for (var i = 0; i < drops.length; i++) {
            var text = chinese[Math.floor(Math.random() * chinese.length)];
            ctx.fillText(text, i * font_size, drops[i] * font_size);

            if (drops[i] * font_size > c.height && Math.random() > 0.975){
                drops[i] = 0;
            }
            drops[i]++;
        }
    }

    setInterval(draw, 50);
</script>

</body>
</html>